<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式表</title>
    <style type="text/css">
        section {
            padding: 10px;
            border-bottom: 5px solid red;
        }
    </style>

    <style type="text/css">
        #test-by-list-style-type ul:nth-child(1) {
            list-style-type: none;
        }

        #test-by-list-style-type ul:nth-child(2) {
            list-style-type: disc;
        }

        #test-by-list-style-type ul:nth-child(3) {
            list-style-type: circle;
        }

        #test-by-list-style-type ul:nth-child(4) {
            list-style-type: square;
        }

        #test-by-list-style-type ul:nth-child(5) {
            list-style-type: decimal;
        }

        #test-by-list-style-type ul:nth-child(6) {
            list-style-type: lower-roman;
        }
    </style>

    <style type="text/css">
        #test-by-list-style-position ul:nth-child(1) {
            list-style-position: inside;
        }
    </style>

    <style type="text/css">
        #test-by-list-style-image ul:nth-child(1) {
            list-style-image: url("../image/list-style-image.png");
        }
    </style>

</head>
<body>

<section id="test-by-list-style-type">
    <ul>
        <li>首页</li>
    </ul>
    <ul>
        <li>首页</li>
    </ul>
    <ul>
        <li>首页</li>
    </ul>
    <ul>
        <li>首页</li>
    </ul>
    <ul>
        <li>首页</li>
    </ul>
    <ul>
        <li>首页</li>
    </ul>
</section>

<section id="test-by-list-style-position">
    <ul>
        <li>首页</li>
    </ul>
    <ul>
        <li>首页</li>
    </ul>
</section>

<section id="test-by-list-style-image">
    <ul>
        <li>首页</li>
        <li>咨询</li>
        <li>关于</li>
        <li>我们</li>
    </ul>
</section>

</body>
</html>